<template>
  <div>
    <panel title="菜单管理" :total="total" @page="pageClick" :showAdd="true" @add="addClick"  >
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="link"
          label="路由">
        </el-table-column>
        <el-table-column
          prop="icon"
          label="图标">
        </el-table-column>
        <el-table-column
          prop="p_name"
          label="父菜单">
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型">
          <template slot-scope="scope">
            {{scope.row.type == 0 ? '首页菜单' : (scope.row.type == 1 ? '父菜单' : '子菜单')}}
          </template>
        </el-table-column>
        <el-table-column
          prop="order"
          label="排序">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <i class="el-icon-edit-outline" @click="modifyMenu(scope.row)" title="编辑"></i>
            <i class="el-icon-delete" @click="deleteMenu(scope.row)" title="删除"></i>
          </template>
        </el-table-column>
      </el-table>
    </panel>

    <el-dialog  :title="isEdit ? '编辑菜单' : '新增菜单'" :visible.sync="dialogVisible" width="500px" >
      
      <el-form :model="menuForm"  ref="menuForm" label-width="100px"  >
        <el-form-item label="名称:" :required="true"  >
          <el-input v-model.trim="menuForm.name"></el-input>
        </el-form-item>
        <el-form-item label="类型:" :required="true" >
          <el-radio-group v-model="menuForm.type"  >
            <el-radio v-for="tt in typeOption" :label="tt.label" :key="tt.label">{{tt.value}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="跳转路由:" :required="true"  v-show="menuForm.type != 1">
          <el-input v-model.trim="menuForm.link"></el-input>
        </el-form-item>
        <el-form-item label="图标:"  v-show="menuForm.type != 2"  :required="true" >
          <el-input v-model.trim="menuForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="父菜单:"  v-if="menuForm.type == 2" :required="true" >
          <el-select v-model="menuForm.parent" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in parentOption"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序:"  >
          <el-input v-model.number="menuForm.order"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  
</template>

<script>
import Menu from "@/api/menu";
export default {
  name: "menuMgr",
  data() {
    return {
      loading : true,
      current: 1,
      pageSize: 10,
      total: 0,
      isEdit: false,
      dialogVisible: false,
      typeOption: [
        {
          label: 0,
          value: "无子菜单"
        },
        {
          label: 1,
          value: "父菜单"
        },
        {
          label: 2,
          value: "子菜单"
        }
      ],
      menuForm: {
        type: 0,
        url: "/test.html"
      },
      parentOption: [],
      tableData: []
    };
  },

  components: {},

  computed: {},

  methods: {
    getMenuList() {
      this.loading = true;
      Menu.getMenuList({ index: this.current - 1, limit: this.pageSize })
        .then(data => {
          this.loading = false;
          this.total = data.total;
          this.tableData = data.list;
          this.parentOption = data.p_list;
        })
        .catch(err => {});
    },
    pageClick(page) {
      console.log('page change :' + page);
      this.current = page;
      this.getMenuList();
    },
    addClick() {
      this.isEdit = false;
      this.menuForm = { type: 0, url: "/test.html" };
      // this.$refs["menuForm"] && this.$refs["menuForm"].resetFields();
      this.dialogVisible = true;
    },
    submitForm() {
      
      if(!this.menuForm.name){
        this.$message.error('请填写菜单名称');
        return false;
      }

      if(this.menuForm.type != 1 && !this.menuForm.link){
        this.$message.error('请填写菜单跳转路由');
        return false;
      }

      if(this.menuForm.type != 2 && !this.menuForm.icon){
        this.$message.error('请填写菜单ICON');
        return false;
      }

      if(this.menuForm.type == 2 && !this.menuForm.parent){
        this.$message.error('类型为子菜单时必须选择父菜单');
        return false;
      }

      if(this.menuForm.order && !/^\d+$/.test(this.menuForm.order)){
        this.$message.error('菜单排序只能为数字');
        return false;
      }

      if(this.menuForm.type != 2){
        this.menuForm.parent = 0;
      }

      if (this.isEdit) {

        if(this.menuForm.parent == this.menuForm.id){
          this.$message.error('父菜单不能选择自己');
          return false;
        }

        Menu.modifyMenu(this.menuForm)
          .then(data => {
            this.dialogVisible = false;
            this.$message({ message: "修改成功", type: "success" });
            this.getMenuList();

          })
          .catch(err => {
            if (err.code == 3) {
              this.$message.error("菜单含有子菜单无法变更为子菜单");
            } else {
              this.$message.error("修改失败");
            }
          });
      } else {
        Menu.addMenu(this.menuForm)
          .then(data => {
            this.dialogVisible = false;
            this.$message({ message: "新增成功", type: "success" });
            this.getMenuList();
          })
          .catch(err => {
            this.$message.error("新增失败");
          });
      }
    },
    modifyMenu(row) {
      this.isEdit = true;
      this.menuForm = Object.assign({},row);
      this.menuForm.parent = this.menuForm.parent || '';
      this.dialogVisible = true;
    },
    deleteMenu(row) {
      this.$confirm("此操作将永久删除所选菜单,确定继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        Menu.deleteMenu(row.id)
          .then(data => {
            this.$message({ message: "删除成功", type: "success" });
            if(this.tableData.length == 1 && this.current > 1){
              this.current -= 1;
            }
            this.getMenuList();
          })
          .catch(err => {
            if (err.code == 3) {
              this.$message.error("菜单含有子菜单或已被使用，无法删除");
            } else {
              this.$message.error("删除失败");
            }
          });
      });
    }
  },

  mounted() {
    this.getMenuList();
  }
};
</script>
<style rel="stylesheet/less" lang="less" scoped>
</style>
